<template>
  <div class="main">
    <div class="left-sides drag">
      <el-avatar
        :src="avatarName"
        shape=""
        size="medium"
        width="35"
        @click=""
      />
      <div class="menu-list">
        <div :class="['tab-item iconfont no-drag icon-chat',currentMenu == '/chat'? 'active' : '']"
             @click.self="changeMenu('/chat')"></div>
        <div :class="['tab-item iconfont no-drag icon-24px',currentMenu == '/contact'? 'active' : '']"
             @click.self="changeMenu('/contact')"></div>
        <div class="tab-item iconfont no-drag icon-folder" @click.self="openFileManage"></div>

      </div>
      <div class="menu-list menu-buttom no-drag " title="设置及其他" @click.stop="showMenuCardInfo = true">
        <span class="iconfont icon-more2 tab-item"></span>
      </div>

    </div>
    <div class="right-container">
      <router-view v-slot="{ Component }">
        <!--        <keep-alive include="chat">-->
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>

  <div v-if="showMenuCardInfo" class="card" @click="changeCard(0)">
    <el-card class="card-info">
      <div class="setting" @click.stop="changeCard(1)"><span>设置</span></div>
    </el-card>
  </div>
  <WindowOperation></WindowOperation>
  <div class="card2 no-drag" v-if="dialogTableVisible">
    <el-card class="info">
      <div>账号在别处登录，点击确定退出登录</div>
      <div class="button">
        <el-button @click="loginOut" type="primary">确定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import WindowOperation from '#/components/WindowOperation.vue'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserInfoStore } from '#/stores/UserInfoStore'
import Tool from '#/utils/Tool'

const userInfoStore = useUserInfoStore()  // 用户存储信息
const router = useRouter()
const route = useRoute()

const avatarName = ref()  // 头像
const showMenuCardInfo = ref(false) // 显示菜单卡片  显示 菜单选项 设置 和其他
const dialogTableVisible = ref(false)  // 显示卡片账号异地登录 退出登录

const changeMenu = (item) => {
  currentMenu.value = item
  router.push(item)
}
const changeCard = (num) => {
  switch (num) {
    case 0:
      showMenuCardInfo.value = false
      break
    case 1:
      showMenuCardInfo.value = false
      window.ipcRenderer.send('openSettingWindow')
      break
  }
}
/**
 * 打开文件管理窗口
 */
const openFileManage = () => {
  window.ipcRenderer.send('openFileManageWindow')
}
const currentMenu = ref('/chat')
watch(
  () => route.path,
  (newVal, oldVal) => {
    if (newVal) {
      currentMenu.value = route.path
    }
  },
  { immediate: true, deep: true }
)
const loginOut = () => {
  dialogTableVisible.value = false
  window.ipcRenderer.send('loginOut',userInfoStore.getUserInfo().userId)
  router.push('/login')
}


onMounted(() => {
  window.ipcRenderer.on('allopatryLogin', (event, data) => {
    dialogTableVisible.value = true
  })


  const user = userInfoStore.getUserInfo()
  avatarName.value = Tool.getAvatar(user.userId, user.avatar)
  window.ipcRenderer.on('updateUserInfo', (event, data) => {
    if (data.avatar) {
      // 重新加载当前页面
      location.reload()
    }
    if (data.userInfo) {
      userInfoStore.setUserInfo(data.data)
    }
  })
})
</script>

<style lang="scss" scoped>
.main {
  background: #ddd;
  display: flex;

  .left-sides {
    width: 55px;
    height: calc(100vh);
    background: #2e2e2f;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 35px;

    .menu-list {
      width: 100%;
      flex: 1;

      .tab-item {
        color: #d3d3d3;
        font-size: 20px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        cursor: pointer;
        position: relative;
      }

      .active {
        color: #07c160;
      }
    }

    .menu-buttom {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .right-container {
    flex: 1;
  }
}

.card {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .card-info {
    padding: 0;
    width: 125px;
    height: 150px;
    background: #2e2e2f;
    color: #8c8c8c;
    position: absolute;
    bottom: 20px;
    left: 55px;
    border: none;
    border-radius: 0;

    * {
      padding: 0;
    }

    .setting {
      user-select: none;
      cursor: pointer;
      width: 125px;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 10px;

      &:hover {
        background: #3b3b3b;
      }
    }


  }
}

.card2 {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .button {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-button {
      width: 100px;
    }
  }
}
</style>
